<template>
  <div id="tabbar">
    <van-tabbar
      class="tabbar"
      v-model="active"
      ref="tabbar"
      v-show="tabbar.show"
      active-color="#405170"
    >
      <van-tabbar-item
        class="tabbar-item"
        v-for="item in tabbar.items"
        :key="item.name"
        :replace="true"
        :to="item.path"
        :info="infoCount(item.info)"
      >
        <span>{{item.name}}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.icon_atc : item.icon" />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import left_voice from '../../assets/img/message/left_voice.gif'
export default {
  data: () => ({
    active: 0
  }),
  mounted() {},
  methods: {
    infoCount(val) {
      val = parseInt(val)
      if (val < 1) {
        return null
      } else if (val > 99) {
        return '99+'
      } else {
        return val
      }
    },
    touchHandler(e) {
      return e.preventDefault()
    }
  },
  computed: {
    ...mapGetters(['tabbar'])
  },
  watch: {
    $route(to, from) {
      for (let i = 0; i < this.tabbar.items.length; i++) {
        if (to.fullPath.indexOf(this.tabbar.items[i].path) !== -1) return (this.active = i)
      }
    }
  },
  mounted() {
    document.getElementById('tabbar').addEventListener('touchmove', this.touchHandler, { passive: false })
  },
  beforeDestroy() {
    try {
      document.getElementById('tabbar').removeEventListener('touchmove', this.touchHandler, false)
    } catch (error) {}
  }
}
</script>
<style lang="less" scoped>
#tabbar {
  // position: fixed;
  // left: 0;
  // bottom: 0;
  // width: 100%;
  // height: 50px;
  // z-index: 999;
  .tabbar {
    z-index: 999;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    img {
      width: 24px;
      height: 24px;
    }
    span {
      font-size: 12px;
    }
  }
}
</style>
